<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>不是简单请求，就是复杂请求。 复杂请求会自动发送预检请求</h1>
    <h2>简单请求</h2>
    <ul>
        <li>✅请求方法（method）为：GET、HEAD、POS</li>
        <li>✅请求头字段要符合《CORS 安全规范》,简记：只要不手动修改请求头，一般都能符合该规范</li>
        <li>✅请求头的Content-Type的值只能是以下三种：
            text/plain;
            multipart/form-data;
            application/x-www-form-urlencoded</li>
    </ul>
    <h2>关于预检请求</h2>
    <ul>
        <li> 发送时机：预检请求在实际跨域请求之前发出，是由浏览器自动发起的。</li>
        <li> 主要作用：用于向服务器确认是否允许接下来的跨域请求</li>
        <li>基本流程：先发起OPTIONS请求，如果通过预检，继续发起实际的跨域请求</li>
        <li> 请求头内容：一个OPTIONS预检请求，通常会包含如下请求头：发起请求的源，实际请求的 HTTP 方法,实际请求中使用的自定义头（如果有的话）
        </li>
    </ul>
    <button id="btn" onclick="showDOM()"> 复杂清清delete</button>
    <button id="btn" onclick="showDOM2()"> 复杂请求设置请求头</button>
    <button id="btn" onclick="showDOM3()"> 请求格式不对</button>
    <script type="text/javascript">

        async function showDOM() {
            const url = 'http://192.168.1.122:8081/delete'
            let result = await fetch(url, { method: 'delete' });
            let data = await result.json();
            console.log(data)

        }
        async function showDOM2() {
            const url = 'http://192.168.1.122:8081'
            let result = await fetch(url, {
                headers: { food: 'aaa' }
            });
            let data = await result.json();
            console.log(data)
            console.log(result.headers.get("abc"))
        }
        async function showDOM3() {
            const url = 'http://192.168.1.122:8081'
            let result = await fetch(url, {
                // headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
                // headers: { 'Content-Type': 'multipart/form-data' }
                // headers: { 'Content-Type': 'text/plain' }
                headers: { 'Content-Type': 'application/json' }

            });
            let data = await result.json();
            console.log(data)
        }

    </script>
</body>

</html>